<template>
  <div :class="`common-footer--${type}`" class="common-footer">
    <div class="common-footer__container">
      <div class="custom-space-between">
        <div style="max-width: 50%;">
          <div class="custom-space-between" style="display: inline-flex; align-items: center">
            <div class="font-type">联系我们</div>
            <div style="width: 0;height: 18px;opacity: 1;border: 1px solid #505762; margin: 0 22px;"/>
            <div class="font-type">使用帮助</div>
          </div>
          <p class="little-type"><span><svg-icon icon="location" size="0.08rem" />地址： </span>四川省成都市武侯区国学巷37号</p>
          <p class="little-type"><span><svg-icon icon="tel" size="0.08rem" />电话： </span>028-85422114</p>
          <p class="little-type"><span><svg-icon icon="fx" size="0.08rem" />传真： </span>028-85582944</p>
        </div>
        <div class="flex">
          <div class="qr-item">
            <div style="border: 1px solid #36CDFD;">
              <img style="margin: 12px" src="@/assets/images/erweima1.jpg" alt=""/>
            </div>
            <h6>华西官方微信公众号</h6>
          </div>

          <div class="qr-item">
            <div style="border: 1px solid #36CDFD;">
              <img style="margin: 12px" src="@/assets/images/erweima1.jpg" alt=""/>
            </div>
            <h6>华西官方微博</h6>
          </div>

          <div class="qr-item">
            <div style="border: 1px solid #36CDFD;">
              <img style="margin: 12px" src="@/assets/images/erweima1.jpg" alt=""/>
            </div>
            <h6>华西科研公众号</h6>
          </div>

        </div>
      </div>
    </div>

    <div class="full flex flex-center padding-20-0" style="background-color: #040E1E">
      <span class="size-16">Copyright © 2023-2024 四川大学华西医院. All Rights Reserved <font color="#36CDFD">蜀ICP备16010396号-5</font></span>
    </div>
  </div>
</template>

<script lang="ts">
import {Options, Prop} from "vue-property-decorator";
import BasePage from "../BasePage";

@Options({
  name: 'CommonFooter'
})
export default class CommonFooter extends BasePage {
  @Prop({default: 'default'})
  type
}
</script>
<style lang='scss' scoped>
.common-footer--default {
  color: white;
  background-image: url('@/assets/images/footer.png');
  background-size: cover;
  // background-color: #fff;
  padding: 50px 0 0;

  .common-footer__container {
    width: var(--custom-width-page-container);
    margin: 0 auto;
  }
}

.common-footer--full {
  background-color: var(--custom-fill-aliceblue);
  padding: 60px 40px;
  box-sizing: border-box;
}

// .footer-font {
//     width: 452px;
//     height: 134px;
//     border-radius: 0px 0px 0px 0px;
//     opacity: 1;
// }

.font-type {
  height: 28px;
  font-size: 20px;
  font-weight: 400;
  color: #36CDFD;
  line-height: 28px;
}

.little-type {
  width: 341px;
  height: 22px;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 22px;
  margin-bottom: 15px;
  span {
    color: #999999;
  }
}


.el-card {
  text-align: center;
  width: 280px;
}

.qr-item {
  display: flex;
  margin: 0 12px;
  align-items: center;
  flex-direction: column;
  >div {
    line-height: 0;
  }

  h6 {
    margin: 12px 0;
    color: white;
  }
}
</style>